.shortcut-key-input-father {
  height: auto;

  .shortcut-key-input {
    border-radius: 4px;
    background-color: rgba(125, 125, 125, 0.38);
    height: 100%;

    &:focus {
      border: 1px solid #7fe7c4;

      & {
        background-color: rgba(53, 77, 53, 0.38);
      }
    }

    &:hover {
      border: 1px solid #7fe7c4;
    }

    .placeholder {
      height: 34px;
      display: flex;
      align-items: center;

      p {
        color: rgba(255, 255, 255, 0.82);
        font-size: 13px;
        text-indent: 4px;
      }
    }

    span {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      background-color: #f4f4f5;
      border-color: #e9e9eb;
      color: #909399;
      padding: 0 22px 0 8px;
      height: 28px;
      font-size: 14px;
      line-height: 28px;
      border-radius: 4px;
      margin: 5px;

      i {
        position: absolute;
        top: 6px;
        right: 4px;
        background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 64C264.58 64 64 264.58 64 512s200.58 448 448 448 448-200.58 448-448S759.42 64 512 64zm0 832c-212.08 0-384-171.92-384-384s171.92-384 384-384 384 171.92 384 384-171.92 384-384 384z' fill='%23909399'/%3E%3Cpath d='M625.14 353.61L512 466.75 398.86 353.61a32 32 0 0 0-45.25 45.25L466.75 512 353.61 625.14a32 32 0 0 0 45.25 45.25L512 557.25l113.14 113.14a32 32 0 0 0 45.25-45.25L557.25 512l113.14-113.14a32 32 0 0 0-45.25-45.25z' fill='%23909399'/%3E%3C/svg%3E") no-repeat center;
        background-size: contain;
        width: 14px;
        height: 14px;
        transform: scale(0.9);
        opacity: 0.6;

        &:hover {
          cursor: pointer;
          opacity: 1;
        }
      }
    }
  }
}

.shortcut-key-input-overflow {
  overflow: auto;
}